import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  InteractionManager,
  StatusBar,
} from 'react-native';
import {
  HText,
  Divider,
  Navbar,
  ScrollableTabView,
  ScrollableTabViewTabBar,
  ScrollableFullTabView,
  Button,
} from '../../DodLibrary/index';

class ScrollableFullTabViewPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      wrapperTabViewLocked: true,
      childTabViewLocked: false,
      childTabViewPage: 0,
    };
  }

  componentDidMount() {
    StatusBar.setBackgroundColor('rgba(0,0,0,0)');
  }

  componentWillUnmount() {
    StatusBar.setBackgroundColor('rgba(0,0,0,.3)');
  }

  _onWrapperTabViewScrolled = () => {
    // this.setState({ :  });
  };

  _onWrapperTabViewChanged = (e) => {
    if (e.i === 0) {
      this.setState({ wrapperTabViewLocked: true });
    } else {
      this.setState({ wrapperTabViewLocked: false });
    }
  };

  _onChildTabViewChanged = (e) => {
    if (e.i === 7) {
      this.setState({ wrapperTabViewLocked: false });
    } else {
      this.setState({ wrapperTabViewLocked: true });
    }
  };

  render() {
    const {
      navigation,
    } = this.props;
    const {
      wrapperTabViewLocked,
      childTabViewLocked,
      childTabViewPage,
    } = this.state;
    return (
      <View style={styles.container}>
        <ScrollableFullTabView
          onScroll={(e) => console.log(e, 'wrapper')}
          onChangeTab={this._onWrapperTabViewChanged}
          locked
          scrollWithoutAnimation={false}
          navbarProps={{
            leftIcon: {
              name: 'arrow-back',
            },
            leftOnPress: () => navigation.goBack(),
            rightIcon: {
              name: 'email',
            },
            backOverlayColor: 'rgba(0,0,0,0)',
          }} >
          <View
            tabLabel="android/zocial"
            style={{
              flex: 1,
            }}>
            {/* inner */}
            <ScrollableTabView
              onScroll = {
                (e) => console.log(e, 'child')
              }
              onChangeTab={this._onChildTabViewChanged}
              renderTabBar={() => (
                <ScrollableTabViewTabBar.ScrollableTabBar {...{
                  textStyle: { // the style of the text
                    fontWeight: 'normal',
                  },
                  tabStyle: { // style of the each wrapper
                    height: 36,
                  },
                  style: { // style of the wrapper
                    height: 37,
                  },
                  underlineStyle: { // style of the underline
                    height: 2,
                    backgroundColor: '#108eeb',
                  },
                  tabBarActiveTextColorGradually: { // provide a rgb color to enable gradually changing color
                    r: 16,
                    g: 142,
                    b: 235,
                  },
                }} />
              )}
              tabBarActiveTextColor="#108eeb"
              prerenderingSiblingsNumber={1}>
              <View
                tabLabel="Inuyasha"
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Button.Ripple
                  onPress={() => navigation.goBack()}>
                  go back
                </Button.Ripple>
              </View>
              <View tabLabel="Kaggome">
                <Text>two</Text>
              </View>
              <View tabLabel="Kikyou">
                <Text>three</Text>
              </View>
              <View tabLabel="Sesshoumaru">
                <Text>four</Text>
              </View>
              <View tabLabel="one1">
                <Text>1one</Text>
              </View>
              <View tabLabel="two1">
                <Text>tw1o</Text>
              </View>
              <View tabLabel="three1">
                <Text>thr1ee</Text>
              </View>
              <View tabLabel="four1">
                <Text>fou1r</Text>
              </View>
            </ScrollableTabView>
          </View>

          {/* outer */}
          <View tabLabel="chrome/zocial">
            <Text>two</Text>
          </View>
          <View tabLabel="github/zocial">
            <Text>three</Text>
          </View>
        </ScrollableFullTabView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default ScrollableFullTabViewPage;
